import {
  Input, Form, Button, message
} from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useRequest, useUnmount } from 'ahooks';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import md5 from 'md5'

import * as APIS from '../../apis/constants/api-constants'
// import ncAppkey from 'src/config/ali-nc-config';

import './style.css';

export default () => {
  const navigate = useNavigate();

  /** 用户登录 */
  const {
    loading, run: login, cancel, error
  } = useRequest(
    (data) => {
      const { username, password } = data;
      return axios.post(APIS.LOGIN, {
        username,
        password: md5(password)
      });
    },
    {
      manual: true,
      onSuccess: (result: any) => {
        const {
          access_token
        } = result.data;
        if (access_token) {
          // 添加全局请求头token
          localStorage.setItem('Authorization', access_token);
          axios.defaults.headers.common.Authorization = access_token;
          // 当是药品管理员的时候自动跳转到——药品概览
          navigate('/');
          window.nc.reload();
        }
      },
      onError: () => {
        if (error?.message === 'Network Error') { message.error('错误：连接服务器失败'); }
        switch (error?.message.split(' ').pop()) {
          case '400':
            message.error('错误：用户名或密码错误', 3);
            break;
          case '401':
            message.error('错误：用户名或密码未输入', 3);
            break;
          default:
            break;
        }
      }
    }
  );

  useUnmount(() => {
    cancel();
  });
  return (
    <div className="login">
      <div className="login-image">
        <div className="context-box">
          <div className="login-box">
            <i className="icon-login" />
            <Form
              className="login-container"
              autoComplete="on"
              onFinish={(values) => login(values)}
            >
              <Form.Item
                name="username"
                rules={[
                  {
                    required: true,
                    message: '请输入用户名',
                  },
                ]}
              >
                <Input
                  prefix={<UserOutlined className="icon-login" />}
                  name="username"
                  type="text"
                  autoComplete="username"
                  className="login-user-input"
                  id="login-user-input"
                  placeholder="请输入用户名"
                />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: '请输入密码',
                  },
                ]}
              >
                <Input
                  prefix={<LockOutlined className="icon-password" />}
                  className="login-password-input"
                  id="login-password-input"
                  name="password"
                  type="password"
                  autoComplete="current-password"
                  placeholder="请输入密码"
                />
              </Form.Item>
              <div id="ali-nc" className="nc-container" />
              <Form.Item>
                <Button className="login-btn" type="primary" htmlType="submit" loading={loading}>
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};
